import * as api from '@/api/order';
import { useEffect } from 'react';
import React, { useState } from 'react';
import { Image, Table, Button } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { EyeOutlined, DeleteOutlined, EditOutlined } from '@ant-design/icons';

type aa = {
  description: string;
  imageUrl: string;
  price: number;
  productName: string;
  product_id?: string;
  quantity: number;
};

interface DataType {
  address: string;
  create_time: string;
  orderDetail: aa;
  order_id?: string;
  order_status?: number;
  pay_status?: number;
  shiping_status?: number;
  total_fee?: number;
  unid?: string;
  user_nickname?: string;
  user_phone?: string;
}

const Order = () => {
  // 指定选中项的 key 数组，需要和 onChange 进行配合
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  // 表格数据
  const [dataSource, setDataSource] = useState<DataType[]>();

  const [data, setData] = useState<DataType[]>([]);

  let getOrder = async () => {
    let res = await api.getOrder();
    console.log(res.data.data);
    // res.data.data.forEach((item:any) => {
    //     item.key = Math.random().toString(32).substring(2)
    //     item.product_id = item.orderDetail[0].product_id
    //     item.productName = item.orderDetail[0].productName
    //     item.price = item.orderDetail[0].price
    // })

    setDataSource(res.data.data);
  };

  useEffect(() => {
    getOrder();
  }, []);

  let columns: ColumnsType<DataType> = [
    {
      title: '产品编号',
      dataIndex: 'product_id',
      align: 'center',
    },
    {
      title: '产品图片',
      dataIndex: 'imageUrl',
      align: 'center',
      render(row) {
        // console.log(row)
        return (
          <Image
            // width={200}
            src={
              row
                ? row
                : 'https://img2.baidu.com/it/u=2421090168,324781765&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1673110800&t=25e086e66b814c4966b8ae843e6586c6'
            }
          />
        );
      },
    },
    {
      title: '产品名称',
      dataIndex: 'productName',
      align: 'center',
    },
    {
      title: '总价',
      dataIndex: 'total_fee',
      align: 'center',
    },
    {
      title: '单价',
      dataIndex: 'price',
      align: 'center',
    },
    {
      title: '购买用户',
      dataIndex: 'user_nickname',
      align: 'center',
    },
    {
      title: '创建时间',
      dataIndex: 'create_time',
      align: 'center',
      sorter: (a, b) => {
        let date1 = new Date(Date.parse(a.create_time.replace(/-/g, '/'))); //转换为Dat()
        let date2 = new Date(Date.parse(b.create_time.replace(/-/g, '/'))); //转换为Dat()
        return date1.getTime() - date2.getTime();
      },
    },
    {
      title: '订单状态',
      dataIndex: 'order_status',
      align: 'center',
    },
    {
      title: '操作',
      dataIndex: 'operation',
      align: 'center',
      render(row, record) {
        // console.log(row)
        return (
          <div className="action_button">
            <Button
              type="primary"
              icon={<EyeOutlined />}
              style={{ backgroundColor: '#32CD32', borderColor: '#32CD32' }}
            />
            <Button type="primary" icon={<EditOutlined />} />
            <Button type="primary" icon={<DeleteOutlined />} danger />
          </div>
        );
      },
    },
  ];

  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };

  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  const hasSelected = selectedRowKeys.length > 0;

  return (
    <div>
      <div style={{ marginBottom: 16 }}>
        <span style={{ marginLeft: 8 }}>
          {hasSelected ? `Selected ${selectedRowKeys.length} items` : ''}
        </span>
      </div>
      <Table
        rowSelection={rowSelection}
        scroll={{ x: 500, y: 360 }}
        pagination={{ position: ['topLeft'], pageSize: 10 }}
        columns={columns}
        dataSource={dataSource}
      />
    </div>
  );
};

export default Order;
